<template>
    <el-scrollbar v-if="dataList.length > 0" :height="`${maxHeight}px`">
        <div
            v-infinite-scroll="onScrollLoad"
            :infinite-scroll-distance="10"
            :infinite-scroll-immediate="false"
            class="list-module">
            <div v-for="(item, index) in dataList" :key="index">
                <div v-if="item.content" class="list-item">
                    <div class="node-box">
                        <span class="cust-spanflex" @click="handleInfo(item)" v-html="js2Obj(item.content)"></span>
                        <!-- 产品需求 变更 -->
                        <!-- <span @click="onHandle(item.behavior_json)" class="action-box">{{ item.behavior_json?.text }}</span> -->
                    </div>
                    <div class="time-box">{{ item.behaviour_time }}</div>
                </div>
            </div>
        </div>
        <div :class="`tip-box ${dataList.length > 0 ? '' : 'active'}`">
            <template v-if="isLoading">加载中...</template>
            <template v-else>
                <template v-if="status == 2 || sorter.total > dataList.length">滚动加载更多</template>
                <template v-else-if="status == 3 || sorter.total == dataList.length">已全部加载</template>
            </template>
        </div>
    </el-scrollbar>
    <el-empty v-else image="/static/noData.png" description="暂无数据"></el-empty>
    <Video ref="video" />
    <!--收集表弹框-->
    <el-drawer v-model="visible" :title="`查看收集表-${title}`" size="40%">
        <StatPreviewForm
            v-if="visible"
            ref="StatPreviewFormRef"
            :control-card-columns="controlCardColumns"
            :cover-image="coverImage"
            :activity-data="activityData"
            :read-only="true" />
        <!-- <template #footer>
            <el-button type="primary" @click="onExport">导出</el-button>
        </template> -->
    </el-drawer>
</template>

<script setup lang="ts">
import { withDefaults, ref, reactive, toRefs, watch, computed, nextTick } from 'vue';
import Video from './Video.vue';
import { viewcollectList } from '@/api/highMaterial/collectionTable';
import StatPreviewForm from './StatPreviewForm/index.vue';
import html2canvas from 'html2canvas';
const emit = defineEmits(['change']);
const zwRef: any = ref(null);
const visible = ref<boolean>(false);
const StatPreviewFormRef = ref<any>();
const coverImage = ref<string>('');
const controlCardColumns = reactive<Array<any>>([]);
const activityData = reactive({});
const title = ref<string>('');
//收集表
const handleInfo = (val: any) => {
    if (val.behaviour_id == 64) {
        getSubmitInfo(val);
    } else {
        return;
    }
};
//获取收集表详情
const getSubmitInfo = (val: any) => {
    viewcollectList({ id: val.behaviour_json.form_id, record_id: val.behaviour_json.record_id }).then((res: any) => {
        visible.value = true;
        title.value = res.name;
        coverImage.value = res.cover_image;
        const map = new Map();
        Object.assign(activityData, {
            form_desc: res?.desc,
            activity_name: res?.name,
            period_type: res?.period_type,
            endTime: res?.deadline
        });
        for (const iterator of res.form_data || []) {
            map.set(iterator.key, iterator);
        }
        controlCardColumns.splice(
            0,
            controlCardColumns.length,
            ...res.config.map((v: any, i: number) => {
                return { ...v, ...(map.get(v.key) || {}) };
            })
        );
        nextTick(() => StatPreviewFormRef.value.setState());
    });
};
//收集表下载
const onExport = (options = {}) => {
    const container: any = document.querySelector('.preview-card-form.previre-form');
    // 设置放大倍数
    const scale = 1;

    // 传入节点原始宽高
    const _width = container.offsetWidth * 2;
    const _height = container.offsetHeight * 2;
    // html2canvas配置项
    const ops = {
        scale,
        _width,
        _height,
        useCORS: true,
        allowTaint: false,
        ...options
    };
    return html2canvas(container, ops).then(canvas => {
        // 返回图片的二进制数据
        const pageData = canvas.toDataURL('image/png', 1.0);
        const link = document.createElement('a');
        link.style.display = 'none';
        link.href = pageData;
        link.setAttribute('download', '收集表' + '.png');
        document.body.appendChild(link);
        link.click();
    });
};
// 判断是否是对象
const isDugeObj = (obj: any) => {
    return obj.constructor === Object;
};
const js2Obj = (obj: any) => {
    return JSON.parse(JSON.stringify(obj));
};
interface Props {
    maxHeight?: number | string;
    isLoading: boolean;
    sorter: any;
    dataList: Array<{
        content: string;
        behaviour_time: string;
        // behavior_json: { type?: string; node?: string; url?: string | undefined; text?: string }
        // created_at: string
    }>;
}

const status = ref(2);
const video = ref();
const props = withDefaults(defineProps<Props>(), {
    maxHeight: 350,
    isLoading: false,
    sorter: {
        pageNum: 1,
        pageSize: 15,
        total: 0
    },
    dataList: () => []
});
const { sorter, dataList, maxHeight, isLoading } = toRefs(props);
const onScrollLoad = (e: any) => {
    const { total } = sorter.value;
    const data = dataList.value.length;
    if (total > data) status.value = 2;
    if (total == data) status.value = 3;
    if (status.value === 2) emit('change');
};
const onHandle = (item: { type?: string; node?: string; url?: string | undefined; text?: string }) => {
    const { type, url } = item;
    if (type === 'link') window.open(url);
    if (type === 'image') window.open(url);
    if (type === 'video') {
        video.value.videoCheck = true;
        video.value.videoUrl = url;
    }
};
</script>

<style lang="scss" scoped>
.el-scrollbar {
    padding-bottom: 50px;

    .list-module {
        padding-right: 20px;
        position: relative;

        &::before {
            position: absolute;
            top: 30px;
            bottom: 30px;
            left: 4px;
            height: calc(100% - 60px);
            content: '';
            border-left: 1px dashed #ffc69e;
        }

        .list-item {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-left: 30px;

            &::before {
                position: absolute;
                left: 0;
                content: '';
                width: 9px;
                height: 9px;
                background-color: #fff;
                border: 2px solid #ff6b00;
                border-radius: 50%;
                box-sizing: border-box;
            }

            &::after {
                position: absolute;
                bottom: 0;
                width: calc(100% - 30px);
                content: '';
                border-bottom: 1px dashed #eaeaea;
            }

            .node-box {
                padding: 16px 0;
                line-height: 20px;
                font-size: 14px;

                .action-box {
                    margin-left: 10px;
                    font-weight: 500;
                    color: #33302d;
                    text-decoration: underline;
                    cursor: pointer;
                }
            }

            .time-box {
                flex: 0 0 auto;
                margin-left: 10px;
                font-size: 14px;
                font-weight: 300;
                color: #969696;
            }
        }
    }

    .tip-box {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 20px 0 10px;
        background-color: #fff;
        font-size: 14px;
        font-weight: 300;
        color: #969696;
        text-align: center;

        &.active {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>
<style lang="scss">
// 千万不要加scoped！！！！
.cust-spanflex {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

//客户样式
.cust-attribute {
    font-size: 14px;
    color: #ff6b00;
}

//员工样式
.cunst-staff {
    font-size: 14px;
    color: #0081ff;
}

//图片
.cunst-img {
    width: 24px;
    height: 24px;
    margin: 0 5px;
}

//标题加粗
.cunst-title {
    font-size: 14px;
    font-weight: 600;
    color: #33302d;
}

//标题链接
.cunst-link {
    font-size: 14px;
    font-weight: 600;
    color: #0081ff;

    .cunst-img {
        width: 24px;
        height: 24px;
        margin: 0 5px;
    }
}
</style>
